<template>
	<view>
		<header-custom
			url-type="navigateBack"
			title="Header 头部导航">
		</header-custom>
		
		<view class="custom">
			<header-custom
				title="默认样式"
				padding-none
				statics>
			</header-custom>
		</view>
			
		<view class="custom">
			<header-custom
				title="自定义左边内容"
				padding-none
				statics>
				<view slot="left" class="left-custom">&#xe722;</view>
			</header-custom>
		</view>
		
		<view class="custom">
			<header-custom
				url="/pages/index/index"
				url-type="switchTab"
				title="自定义右边内容"
				padding-none
				statics>
				<dropdown slot="right" :items="dropdownItems" offset="15" @onItemClick="onItemClick">
					<view class="iconfont right-ctrl">&#xe72e;</view>
				</dropdown>
			</header-custom>
		</view>
		
		<view class="custom">
			<header-custom url-type="navigateBack" background="#2d8cf0" color="#fff" padding-none statics>
				<view class="whole-custom">
					<text
						v-for="(v, i) in tabs"
						:key="i"
						:class="['text', i===current?'active':'']"
						@click="onTabChange(i)">{{v}}</text>
				</view>
			</header-custom>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dropdownItems: [
					{label: '扫一扫', icon: '\ue722'},
					{label: '转发', icon: '\ue726'},
					{label: '分享', icon: '\ue729'}
				],
				tabs: ['推荐', '最新', '免费'],
				current: 0
			}
		},
		methods: {
			onItemClick(i){
				uni.showToast({
					title: `您点击了${this.dropdownItems[i].label}`,
					icon: 'none'
				})
			},
			onTabChange(i){
				this.current = i
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color:$page-bg;
}
.custom{
	margin: 40upx 0;
}
.whole-custom{
	display: flex;
	align-items: center;
	.text{
		display: inline-block;
		margin: 0 20upx;
		transition: all .3s;
	}
	.active{
		font-size: $font-size-llg;
		font-weight: bold;
	}
}
.right-ctrl{
	height: 100%;
	width: 80upx;
	font-size: 50upx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.left-custom{
	display: flex;
	align-items: center;
	font-size: 50upx;
	width: 88upx;
	justify-content: center;
}
</style>
